{% extends base_template %}

{% block scripts %}
{{ block.super }}
{% if section.get_active_enrollments %}
<script type="text/javascript">
  var learning_style_counts = {
    'auditory': parseInt({{ learning_style_counts.auditory }}),
    'kinesthetic': parseInt({{ learning_style_counts.kinesthetic }}),
    'visual': parseInt({{ learning_style_counts.visual }})
  }
</script>
{% if learning_style_counts.auditory > 0 or learning_style_counts.kinesthetic > 0 or learning_style_counts.visual > 0 %}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
{% endif %}
{% endif %}
<script type="text/javascript" src="{{ MEDIA_URL }}js/roster.js"></script>
{% endblock %}

{% block body %}
<h1>{{ section }}: {{ section.title }}</h1>
<div id="roster_menu">
  <ul>
      <li class="roster_menu_item"><a href="#roster">Roster</a></li>
      <li class="roster_menu_item"><a href="#statistics">Statistics</a></li>
  </ul>
  <div id="statistics">
      <h2>Statistics</h2>
      <div id="statistics-window">
         {% if learning_style_counts.auditory > 0 or learning_style_counts.kinesthetic > 0 or learning_style_counts.visual > 0 %}
            <div id="class-chart"></div>
            <div id="chart-explanation">
              <h2>Description</h2>
              <p>This graph shows the number of students in this class who fall into each of the three learning styles: auditory, kinesthetic, and visual.
              It is worth noting that, often times, all students in a given class do not take the learning style assessment. Therefore, this graph may not reflect the breakdown of the entire class, but rather a small sampling of the class.</p>
            </div>
         {% else %}
            <p>There are no statistics available for this class.</p>
         {% endif %}
    </div>
  </div>
  <div id="roster">
      <h2 class="clear">Roster</h2>
        {% if section.get_active_enrollments %}
        <form id="roster-form">
          <table>
            <thead>
              <tr>
                <th style="width: 5%;"></th>
                <th style="width: 10%;">ID Number</th>
                <th style="width: 30%;">Student</th>
                <th style="width: 25%;">Personality Type</th>
                <th style="width: 25%;">Learning Style</th>
              </tr>
            </thead>
            <tbody>
              {% for student in students %}
              <tr class="{% cycle "odd" "even" %}">
                <td style="text-align: center;"><input type="checkbox" name="students" id="id_students_{{ forloop.counter0 }}" value="{{ student.id }}" /></td>
                <td><b>{{ student.id_number }}</b></td>
                <td><a href="{% url profile:profile student.id %}">{{ student.full_name }}</a>
                    {% if student.notes > 0 or student.contacts > 0 or student.visits > 0 %}
                    <a class="icons" href="{% url profile:profile student.id %}#activity" title= "{% if student.notes > 0 %}Notes: {{ student.notes }} {% endif %}{% if student.contacts > 0 %} Contacts: {{ student.contacts }} {% endif %}{% if student.visits > 0 %} Visits: {{ student.visits }}{% endif %}"><img src="{{ MEDIA_URL }}img/information.png" alt="Information Icon" id="roster-icon"></a>
                    {% endif %}
                    {% if student.interventions > 0 %}
                    <a class="icons" href="{% url profile:profile student.id %}#activity" title="Interventions: {{ student.interventions }}"><img src="{{ MEDIA_URL }}img/warning.png" alt="Warning Icon" id="roster-icon"></a>
                    {% endif %}    
                </td>
                <td>{{ student.personality_type }}</td>
                <td>{{ student.learning_style }}</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
          <input type="hidden" id="id_section_id" name="section_id" value="{{ section.id }}" />
          <p style="text-align: right;">
            <input type="button" id="id_note" name="note" value="Note" />
            <input type="button" id="id_contact" name="contact" value="Contact" />
            <input type="button" id="id_intervene" name="intervene" value="Intervene" />
          </p>
        </form>
        {% else %}
        <p><em>No students enrolled in this class</em></p>
        {% endif %}
  </div>
</div>

<div id="contact-window" title="Contact"></div>
<div id="intervention-window" title="Intervention"></div>
<div id="note-window" title="Note"></div>
{% endblock %}
